<template>
  <div v-loading="loading">
    <div>
      <el-carousel indicator-position="outside" height="420px">
        <el-carousel-item v-for="item in bhtList" :key="item.id">
          <div style="background-size: cover" @click="$goto(item.url)"
               :style="{ 'background-image': 'url(' + item.image + ')', width: '100%', height: '420px' }">
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="sidebar">
      <li><a href="#1">人气景点</a></li>
      <li><a href="#5">文艺演出</a></li>
      <li><a href="#2">美食推荐</a></li>
      <li><a href="#3">行程规划</a></li>
      <!-- <li><a href="#7">住宿推荐</a></li> -->
      <li><a href="#4">旅游资讯</a></li>
      <li><a href="#6">应急信息</a></li>
    </div>
    <div>
      <!-- 紧急信息提示 -->
      <el-container>
        <el-carousel 
          v-if="emergencies.length" 
          class="lunbo" 
          height="35px" 
          direction="vertical" 
          :interval="2500" 
          :autoplay="true">
          <el-carousel-item
            v-for="(emergency, index) in emergencies" 
            :key="index">
            <el-alert
              :title="emergency.title"
              type="warning"
              show-icon
              :closable="false"
            />
          </el-carousel-item>
        </el-carousel>
      </el-container>
    </div>

    <div class="attraction">
      <e-container>
        <div style="margin:10px 0 0 0">
          <e-module-model-box id="1" title="人气景点">
            <el-row :gutter="30">
              <el-col v-for="r in attractionlist1" :md="4" :key="r.id" style="margin-bottom: 20px"
                      class="attraction-label">
                <e-module-xiezi :title="r.name" :image="r.photo" :image-height="100"
                                :description="r.address" :is-scale="true" :to="'/attractiondetail?id=' + r.id"
                                style="height: 380px;width: 181px;margin:3px 20px 0px 40px;">
                </e-module-xiezi>
              </el-col>
            </el-row>
          </e-module-model-box>
        </div>
      </e-container>
    </div>
    <div>
      <div class="custom-module-box">
        <h2 class="custom-title" id="5">文艺演出</h2>
        <div class="custom-content">
          <!-- 左侧大图 -->
          <div class="custom-left">
            <div class="custom-product" v-if="performanceInfolist5.length > 0">
              <img :src="performanceInfolist5[0].per_image" alt="演出图片" class="custom-image-left"
                   @click="navigateToPERDetail(performanceInfolist5[0].id)">
              <div class="custom-details-left">
                <h3 class="custom-name">{{ performanceInfolist5[0].per_name }}</h3>
                <p class="custom-price">￥{{ performanceInfolist5[0].per_price }}</p>
                <router-link :to="'/performanceInfodetail?id=' + performanceInfolist5[0].id"
                             class="custom-link">查看详情</router-link>
              </div>
            </div>
          </div>
          <!-- 右侧图片列表 -->
          <div class="custom-right">
            <!-- 右侧第一行大图 -->
            <div class="custom-product1" v-if="performanceInfolist5.length > 1">
              <img :src="performanceInfolist5[1].per_image" alt="演出图片" class="custom-image-right-large"
                   @click="navigateToPERDetail(performanceInfolist5[1].id)">
              <div class="custom-details">
                <h4 class="custom-name">{{ performanceInfolist5[1].per_name }} ￥{{
                    performanceInfolist5[1].per_price }}</h4>
                <!--                  <p class="custom-price"></p>-->
                <router-link :to="'/performanceInfodetail?id=' + performanceInfolist5[1].id"
                             class="custom-link">查看详情</router-link>
              </div>
            </div>
            <!-- 右侧第二行小图 -->
            <div class="custom-right-small">
              <div class="custom-product3" v-for="(item, index) in performanceInfolist5.slice(2, 5)"
                   :key="item.id">
                <img :src="item.per_image" alt="演出图片" class="custom-image-small"
                     @click="navigateToPERDetail(item.id)">
                <div class="custom-details1">
                  <h5 class="custom-name">{{ item.per_name }} ￥{{ item.per_price }}</h5>
                  <!--                    <p class="custom-price"></p>-->
                  <router-link :to="'/performanceInfodetail?id=' + item.id"
                               class="custom-link">查看详情</router-link>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="foodlist">
      <e-container>
        <div style="margin: 10px 0;">
          <e-module-model-box id="2" title="美食推荐">
            <el-row :gutter="30">
              <el-col :md="8" v-for="r in foodlist2.slice(1, 4)" :key="r.id" style="margin-bottom: 20px;">
                <div class="circle-image" @click="navigateToDetail(r.id)">
                  <img :src="r.photo" class="image" />
                  <div class="description">{{ getShortDescription(r.introduction) }}</div>
                </div>
                <div class="food1">{{ r.name }}</div>
                <div class="food2">{{ "￥" + r.price }}</div>
              </el-col>
            </el-row>
          </e-module-model-box>
        </div>
      </e-container>
    </div>

    <div>
      <e-container>
        <div style="margin:10px 0 0 0">
          <e-module-model-box id="3" title="行程规划">
            <el-row :gutter="20" style="padding: 23px;margin: -15px -62px -1px;">
              <el-col v-for="r in strategylist3" :md="6" :key="r.id" style="margin-bottom: 10px;padding: 0px 300px 0px 61px">
                <PerformanceCard
                    :title="r.name"
                    :image="r.photo"
                    :description="getShortDescription(getCleanDescription(r.introduction))"
                    :to="'/strategydetail?id=' + r.id"
                />
              </el-col>
            </el-row>
          </e-module-model-box>
        </div>
      </e-container>
    </div>

    <!-- <div v-if="this.username!=undefined&&this.hotels&&this.hotels.length>0&&$session.username">
      <div class="hotels-container" v-if="hotels">
        <e-container>
          <div style="margin:10px 0 0 0">
            <e-module-model-box id="7" title="住宿推荐">
              <div class="">
                <e-hotel-list v-for="hotel in hotels" :key="hotel.id" @click="navigateToHotelDetail(hotel)"
                              :hotel='hotel' :title="hotel.name" :description="hotel.type" :len="80"
                              :image="hotel.photo">

                  <span>评分: {{ hotel.rating }} </span>
                  <span>地址: {{ hotel.address }}</span>
                   <span>距离: {{ hotel.distance }}米</span> -->
                <!-- </e-hotel-list>
              </div>
            </e-module-model-box>
          </div>
        </e-container>
      </div>
    </div> --> 

    <div>
      <e-container>
        <div style="margin:10px 0 0 0">
          <e-module-model-box id="4" title="旅游资讯">
            <div class="">
              <e-news-list v-for="r in newslist4" :key="r.id" :to="'/newsdetail?id=' + r.id"
                           :title="r.title" :description="r.content" :len="80" :image="r.photo">
                                <span>分类: <e-select-view module="newskind" :value="r.kind" select="id"
                                                           show="name"></e-select-view></span>
                <span>添加人:{{ r.admin }}</span>
                <span>点击率:{{ r.clicks }}</span>
              </e-news-list>
            </div>
          </e-module-model-box>
        </div>
      </e-container>
    </div>
    <div>
      <e-container>
        <div style="margin:10px 0 0 0">
          <e-module-model-box id="6" title="应急信息">
            <div class="">
              <e-news-list v-for="r in emergencylist6" :key="r.id" :to="'/emergencydetail?id=' + r.id"
                           :title="r.title" :description="r.content" :len="80" :image="r.photo">
                                <span>分类: <e-select-view module="emergencykind" :value="r.kind" select="id"
                                                           show="name"></e-select-view></span>
                <span>添加人:{{ r.admin }}</span>
                <span>点击率:{{ r.clicks }}</span>
              </e-news-list>
            </div>
          </e-module-model-box>
        </div>
      </e-container>
    </div>


  </div>
</template>
<style type="text/scss" scoped lang="scss">
div.sidebar {
  position: sticky;
  float: left;
  top: 5px;
  width: 159px;
  margin-left: 5px;
  padding: 15px 10px;
  font-size: 16px;
  line-height: 1.5;
  text-align: center;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border: 1px solid #e0e0e0;
  z-index: 100;
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;

  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  }

  a {
    color: #555;
    text-decoration: none;
    display: block;
    padding: 10px 0;
    border-bottom: 1px solid #e0e0e0;

    &:last-child {
      border-bottom: none;
    }

    &:hover {
      color: #000;
    }
  }
}

.lunbo {
  padding: 0 8px 0 0;
  box-sizing: border-box;
  height: 35px;//文本区域的高度
  line-height: 35px;//文本的行间距，与高度相同，则表示一行展示
  text-overflow: ellipsis;//超出内容...展示
  word-break: keep-all;//是否折断文本，keep-all表示不折断
  white-space: nowrap;//不换行展示文本
  overflow: hidden;//超出部分隐藏，与text-overflow配合使用
  flex: 1;//这个是跟左侧的图片组成的一个flex布局
}


.hotels-container {
  .container {
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
  }

  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .hotel {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 10px;
    margin: 10px 0;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 600px;
  }

  .hotel-img {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 20px;
  }

  .hotel-photo {
    width: 150px;
    height: 150px;
    background-size: cover;
    background-position: center;
    border-radius: 8px;
  }

  .hotel-info {
    flex: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .hotel-info h2 {
    margin: 0;
    font-size: 18px;
    font-weight: bold;
    color: #333;
  }

  .hotel-info p {
    margin: 5px 0;
    font-size: 14px;
    color: #666;
  }
}

::v-deep .section-title {
  font-family: 'Cursive', serif;
  text-align: center;
  font-size: 24px;
}

.jingdian {
  margin-bottom: 100px;
  height: 1000px;

  .sidebar-widget-body {
    padding: 30px 10px;
  }


}

.attraction-label {
  width: 234px;
  height: 396px;

  //margin-bottom: 103px;
  ::v-deep .e-module-xiezi .single_product {
    height: 411px;
  }
}

.custom-module-box {
  background-color: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  padding: 20px;
  margin-top: -23px;
  height: 584px;
}

.custom-title {
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
  margin-left: 3%;
}

.custom-content {
  display: flex;
  justify-content: space-between;

  .custom-left {
    margin-left: 19%;
    height: 200px;
    position: relative;

    .custom-image-left {
      width: 98%;
      height: 395px;
      border-radius: 18px;
      object-fit: cover;
      object-position: left;
    }

    .custom-details-left {
      position: absolute;
      bottom: -195px;
      left: 16px;
      width: 100%;
      background-color: rgba(255, 255, 255, 0.8);
      color: #000;
      padding: 10px;
      border-bottom-left-radius: 18px;
      border-bottom-right-radius: 18px;
      opacity: 0;
      transition: opacity 0.3s ease;
      /* 透明度过渡效果 */
    }
  }

  .custom-left:hover .custom-details-left {
    opacity: 1;
  }

  .custom-right {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .custom-product {
    margin-bottom: 20px;
    padding: 0px;
    margin-left: 20px;
    background-color: #f9f9f9;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 300px;
  }

  .custom-product1 {
    margin-bottom: 20px;
    padding: 0px;
    background-color: #f9f9f9;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    width: 753px;
    height: 208px;
    position: relative;
  }

  .custom-product3 {
    margin-top: -16px;
    padding: 0px;
    background-color: #f9f9f9;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    width: 251px;
    height: 181px;
    position: relative;
  }

  .custom-image {
    width: 100%;
    height: auto;
    border-radius: 10px;
  }

  .custom-right {
    flex: 3;
    display: flex;
    flex-direction: column;
    margin-left: 20px;

    .custom-details {
      position: absolute;
      bottom: 0px;
      left: 0px;
      width: 100%;
      background-color: rgba(255, 255, 255, 0.8);
      color: #000;
      padding: 10px;
      border-bottom-left-radius: 18px;
      border-bottom-right-radius: 18px;
      opacity: 0;
      transition: opacity 0.3s ease;

      h4 {
        color: #464646;
      }
    }

    .custom-details1 {
      position: absolute;
      bottom: -2px;
      left: 2px;
      width: 100%;
      background-color: rgba(255, 255, 255, 0.8);
      color: #000;
      padding: 10px;
      border-bottom-left-radius: 18px;
      border-bottom-right-radius: 18px;
      opacity: 0;
      transition: opacity 0.3s ease;
    }
  }

  .custom-product1:hover .custom-details,
  .custom-product3:hover .custom-details1 {
    opacity: 1;
  }

  .custom-image-right-large {
    width: 100%;
    height: auto;
    border-radius: 18px;
    object-fit: cover;
    margin-bottom: 10px;
  }

  .custom-right-small {
    display: flex;
    flex-wrap: wrap;
  }

  .custom-image-small {
    width: 100%;
    height: 100%;
    border-radius: 18px;
    object-fit: cover;
    margin: 1%;
  }
}
::v-deep .performance-card__info{
  top: 160px;
}
.foodlist {
  .circle-image {
    width: 302px;
    height: 200px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    margin: 0 auto;
  }

  .image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .food1 {
    font-size: 16px;
    margin: 37px 149px;
    font-weight: bold;
    cursor: pointer;
  }

  .food2 {
    font-size: 16px;
    margin: -23px 149px 0px 148px;
    font-weight: bold;
  }

  .description {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 20px);
    height: auto;
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
    text-align: center;
    padding: 5px;
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .circle-image:hover .description {
    opacity: 1;
  }

}
</style>
<script>
import api from '@/api';
import { extend } from '@/utils/extend';

export default {
  data() {
    return {
      loading: false,
      emergencies: [],
      bhtList: [],
      attractionlist1: [],
      foodlist2: [],
      strategylist3: [],
      newslist4: [],
      performanceInfolist5: [],
      emergencylist6: [],
      latestEmergency: null,
      hotels: [],
      username:this.$store.state.user.session.username,
    };
  },
  methods: {
    navigateToHotelDetail(hotel) {
      console.log("跳转详情页");
      // 导航到酒店详情页
      this.$router.push({
        name: 'IndexHotelDetail',
        query: {
          hotel: JSON.stringify(hotel),
          checkin: this.getCurrentDate(),
          checkout: this.getCurrentDate(),
        }
      });
    },
    getPhotos(hotel) {
      if (hotel.photos && hotel.photos.length > 0) {
        return hotel.photos;
      } else {
        return [{ url: 'https://via.placeholder.com/150' }];
      }
    },
    getCurrentDate() {
      let today = new Date();
      let month = String(today.getMonth() + 1).padStart(2, '0');
      let day = String(today.getDate()).padStart(2, '0');
      let year = today.getFullYear();
      return `${year}-${month}-${day}`;
    },
    loadPageData() {
      this.$get(api.recommend,'username='+this.username)
          .then((res) => {
            console.log(res);
            if (res.code == api.code.OK) {
              this.hotels = res.data.hotels;
              console.log(this.hotels);
            }
          }).catch(err => {
        console.error('暂无本地推荐数据', error);
        this.hotels = [];
        this.$message.error(err.message);
      });
      // try {
      //     const storedHotels = localStorage.getItem('hotels');
      //     if (storedHotels) {
      //         const parsedHotels = JSON.parse(storedHotels);
      //         // 只取前三个酒店，并更新 data 中的 hotels
      //         this.hotels = parsedHotels.slice(0, 3);

      //         console.log(this.hotels);
      //     }
      // } catch (error) {
      //     console.error('暂无本地推荐数据', error);
      //     this.hotels = [];
      // }
      if (this.loading) return;
      this.loading = true;
      this.$get('/index').then(res => {
        this.loading = false;
        if (res.code === api.code.OK) {
          extend(this, res.data);
          // 获取所有紧急信息
          if (this.emergencylist6 && this.emergencylist6.length > 0) {
            this.emergencies = this.emergencylist6; // 将所有紧急信息保存到数组中
          } else {
            this.emergencies = []; // 如果没有紧急信息，初始化为空数组
          }
        } else {
          this.$message.error(res.msg);
        }
      }).catch(err => {
        this.loading = false;
        this.$message.error(err.message);
      });

    },
    navigateToDetail(id) {
      this.$router.push({ path: '/fooddetail', query: { id: id } });
    },
    navigateToPERDetail(id) {
      this.$router.push({ path: '/performanceInfodetail', query: { id: id } });
    },
    getShortDescription(description) {
      return description.length > 50 ? description.substring(0, 50) + "..." : description;
    },
    getCleanDescription(description) {
      return description
          .replace(/<\/?p>/g, '') // 去掉 <p> 和 </p> 标签
          .replace(/&ldquo;/g, '“') // 替换 &ldquo; 为 “
          .replace(/&rdquo;/g, '”') // 替换 &rdquo; 为 ”
          .replace(/<br\s*\/?>/gi, ''); // 去掉 <br> 和 <br/> 标签
    }
  },
  created() {
    this.loadPageData();
  },
  mounted() {
    this.loadPageData();
  },
  destroyed() { }
};
</script>